<script>
import global from "@/views/global/global";
import axios from "axios";

export default {
  name: "Leave",
  data(){
    return{
      realName: global.user.realName,
      department:global.user.departmentName,
      Leave: {
        userId: global.user.id,
        departmentId:global.user.departmentId,
        startDate:'',
        endDate:'',
        leaveDays:'',
        leaveType:'',
        reason:'',
        approverId:1,
      }
    }
  },
  methods: {
    getData() {
      this.$confirm('确定提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(this.Leave.startDate === null || this.Leave.startDate === undefined){
          this.$message({
            type: 'warning',
            message: '请输入出差日期!'
          });
          return;
        }
        if(this.Leave.endDate === null || this.Leave.endDate === ''){
          this.$message({
            type: 'warning',
            message: '请输入出差结束日期!'
          });
          return;
        }
        if(this.Leave.leaveDays === null || this.Leave.leaveDays === ''){
          this.$message({
            type: 'warning',
            message: '请输入请假天数!'
          });
          return;
        }
        if(this.Leave.leaveType === null || this.Leave.leaveType === undefined || this.Leave.leaveType === ''){
          this.$message({
            type: 'warning',
            message: '请输入请假类型!'
          });
          return;
        }
        if(this.Leave.reason === null || this.Leave.reason === ''){
          this.$message({
            type: 'warning',
            message: '请输入请假事由!'
          });
          return;
        }
      axios.post("/oa/leave/addition", this.Leave).then((res) => {
        console.log(res.data.result)
        if (res.data.result === "true") {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$router.push('/HomePageView')
        } else {
          this.$message({
            type: 'error',
            message: '提交失败!'
          });
        }
      })
    }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    },
    cancel() {
      // 返回到我的桌面
      this.$router.push('/HomePageView')
    },
    setLeaveDays(){
      if (this.Leave.startDate !== null && this.Leave.endDate !== null){
        this.Leave.leaveDays = (this.Leave.endDate.getTime() - this.Leave.startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
        //整数
       if (this.Leave.leaveDays < 0){
          this.$message({
            type: 'warning',
            message: '请输入正确日期!'
          });
         this.Leave.startDate = null
         this.Leave.endDate = null
         this.Leave.leaveDays =''
        }
      }else{
        this.Leave.leaveDays =''
      }
     }
  }
}
</script>

<template>
  <div  class="titleBox" >请假申请</div>

  <el-form
      label-width="auto"
      :model="book"
      style="max-width: 600px"
  >
    <el-form-item label="姓名" >
      <span>{{this.realName}}</span>
    </el-form-item>

    <el-form-item label="部门">
      <span>{{this.department}}</span>
    </el-form-item>

    <el-form-item label="开始时间" >
      <el-date-picker
          v-model="Leave.startDate"
          type="date"
          placeholder="选择请假开始时间"
      />结束时间：
      <el-date-picker @change="setLeaveDays()"
          v-model="Leave.endDate"
          type="date"
          placeholder="选择请假结束时间"
      />
    </el-form-item>

    <el-form-item label="请假天数">
      <el-input v-model="Leave.leaveDays" disabled
                placeholder="请输入请假天数"/>
    </el-form-item>


    <el-form-item label="请假类型">
      <el-select v-model="Leave.leaveType" placeholder="请假类型" style="width: 240px" >
        <el-option label="事假" value="事假"/>
        <el-option label="病假" value="病假"/>
        <el-option label="丧假" value="丧假"/>
        <el-option label="婚假" value="婚假"/>
      </el-select>
    </el-form-item>

    <el-form-item label="请假事由">
      <el-input  type="textarea" v-model="Leave.reason"
                 placeholder="请输入请假的原因"/>
    </el-form-item>

    <!--    <el-form-item label="下一步审批人">
                <el-select v-model="income.userId" placeholder="审批人" style="width: 240px">
                  &lt;!&ndash;        默认选中当前用户&ndash;&gt;
                  <el-option
                      :key="this.realName"
                      :label="this.realName"
                      :value="this.realName"
                  />
                </el-select>
              </el-form-item>-->
    <el-button type="primary" @click="getData()">确定</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-form>
</template>

<style scoped lang="less">

</style>
